<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="/share/css/schedule.css" type="text/css" />
</head>
<body>
	<script type="text/javascript" src="/share/js/jquery-1.8.3.js"></script>
	<script type="text/javascript" src="/share/js/jquery-ui-1.9.2.custom.js"></script>
	<!-- 
<div class="task todo round" onclick="alert('asdad');">asda</div>
<div class="task complete round">asda</div>
 -->
 	<div class="header" style="text-align:center;padding-bottom:7px;">
 		<center><table style="width:200px">
 			<tr>
 				<td style="width:20px"><a href="/index.jh?year=${calendarData.prevYear}&month=${calendarData.prevMonth}"><div class="navi prev"></div></a></td>
 				<td class="header" style="width:100px;padding-left:10px;padding-top:5px;">${calendarData.year}년 ${calendarData.month}월</td>
 				<td style="width:20px"><a href="/index.jh?year=${calendarData.nextYear}&month=${calendarData.nextMonth}"><div class="navi next"></div></a></td>
 			</tr>
 		</table></center>
 	</div>
 	<div id="calendar" style="float:left;width:900px;">
	<table class="month">
		<c:set var="index" value="0" />
		<c:forEach var="i" begin="1" end="${calendarData.weekCount}">
			<tr>
				<c:forEach var="j" begin="1" end="7">
					<c:set var="idp" value="${scheduleData[index].ymd}" />
					<td id="td${idp}">
						<div class="celltop">
							<a href="javascript:addTask('${idp}');">${scheduleData[index].date}일</a>
						</div> <c:forEach var="task" items="${scheduleData[index].taskList}">
							<div id="t${task.id}" class="task <c:if test="${task.done eq 'N'}">todo</c:if><c:if test="${task.done eq 'Y'}">complete</c:if> round" ondblclick="modify('${task.id}');">
								<input type="text" id="input${task.id}" value="${task.task}" style="display: none"> 
								<input type="text" id="done${task.id}" value="${task.done}" style="display: none"> 
								<input type="text" id="ymd${task.id}" value="${task.ymd}" style="display: none"> 
								<span id="span${task.id}">${task.task}</span>
							</div>
						</c:forEach>
					</td>
					<c:set var="index" value="${index + 1}" />
				</c:forEach>
			</tr>
		</c:forEach>
	</table>
	</div>
	<div id="right" style="float:left;width:200px;border: 1px solid #a3a3a3;height:100%;left-margin:10px">
	</div>
	<script type="text/javascript">
		var option = {};
		option.helper = function(event) {
			var clone = $(event.target).clone();
			clone.width(event.target.offsetWidth);
			return clone;
		};
		option.opacity = 0.5;
		option.revert = 'invalid';

		$('.task').draggable(option);

		var dropOption = {};
		dropOption.drop = function(event, ui) {
			ui.draggable
					.insertAfter(event.target.children[event.target.childElementCount - 1]);
			var targetYmd = $(event.target).attr('id').replace('td', '');
			var taskId = ui.draggable.attr('id').replace('t', '');
			$('#ymd' + taskId).val(targetYmd);

			$.ajax({
				type : "POST",
				url : "/updateTask.jh",
				data : "ymd=" + $('#ymd' + taskId).val() + "&task="
						+ $('#input' + taskId).val() + "&done="
						+ $('#done' + taskId).val() + "&id=" + taskId,
				success : function(result) {
					if (result == '-1') {
						alert('서버입력실패');
						
					}
				}
			});
		};

		$('td').droppable(dropOption);

		function addTask(id) {
			$('#td' + id).append('<div class="task todo round" id="newTask"><input id="newDone" value="N" style="display:none"><input id="newYmd" value="'+id+'" style="display:none"><input type="text" id="newInput" onblur="insert();"></div>');
			$('#newInput').focus();
			$('#newTask').draggable(option);
		}

		function insert() {

			$.ajax({
				type : "POST",
				url : "/insertTask.jh",
				data : "ymd=" + $('#newYmd').val() + "&task="
						+ $('#newInput').val(),
				success : function(result) {
					if (result == '-1') {
						alert('서버입력실패');
					} else {
						var id = result;

						var task = $('#newTask');
						var input = $('#newInput');
						var data = $('#newYmd');
						var done = $("#newDone");

						task.attr('id', 't' + id);
						task.attr('ondblclick', 'modify("' + id + '")');
						input.attr('id', 'input' + id);
						data.attr('id', 'ymd' + id);
						done.attr('id', 'done' + id);
						
						input.attr('onblur','');
						task.append('<span id="span'+id+'">'+input.val()+'</span>');
						input.hide();
					}

				}
			});
		}

		function modify(id) {
			var input = $('#input' + id);
			$('#span'+id).hide();
			input.attr('onblur', 'update("' + id + '")');
			input.show();
			input.focus();
		}
		
		function update(id){
			$.ajax({
				type : "POST",
				url : "/updateTask.jh",
				data : "ymd=" + $('#ymd' + id).val() + "&task="
						+ $('#input' + id).val() + "&done="
						+ $('#done' + id).val() + "&id=" + id,
				success : function(id) {
					if (id == '-1') {
						alert('서버입력실패');
					} else {
						var input = $('#input' + id);
						input.attr('onblur', '');
						input.hide();
						var span = $('#span'+id);
						span.html(input.val());
						span.show();
					}
				}
			});

		}
		var resize = function(){
			$(calendar).width($(window).width()-220);
			var h = ($(window).height()-$('div.header').height()-40);
			$('table.month tr td').height(h/5);
			$('#right').height(h);
		};
		$(document).ready(resize);
		$(window).resize(resize);
	</script>
</body>
</html>
